<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="" id="form">
    <input type="text" id="ipt">
    <button id="btn">获取学生详细信息</button>
  </form>
  <script>
    //获取元素
    let oipt =document.querySelector(`#ipt`)
    let obtn =document.querySelector(`#btn`)
    let oform =document.querySelector(`#form`)
    
    //使用ajax
    //给表单添加提交事件
    oform.onsubmit=function(){

      let userId =oipt.value
      if( userId === ""){
        return
      }
      
      let xhr =new XMLHttpRequest()
      // xhr.open(`get`,`http://127.0.0.1:3000/user`,true)
      xhr.open(`get`,`/userInfo/${userId}?_=${Date.now()}`,true)
      xhr.send()
      xhr.onreadystatechange=function(){
        
        //请求不止是ajax请求 状态码 还有 响应状态码
        if(xhr.readyState ==4&&xhr.status>=200 && xhr.status<=299){
          // xhr.responseText 响应数据
          console.log(111);
          console.log(111);
          console.log(JSON.parse((xhr.responseText)));
          // document.write(xhr.responseText)
          //  let p =document.createElement(`p`) 
          // p.innerHTML =xhr.responseText
          // oform.appendChild(p)
          // obtn.append(document.write(xhr.responseText))
        }
      }
      // e.preventDefault() 
      return false
    }
  </script>
</body>
</html>